<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>这是一个初始效果</div>
    <br/>
    <div class="div2">改变后的效果</div>
</body>
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }

    .div2{
        /* 位置移动 */
        /* transform: translate(100px,100px); */
        /* safari chrome */
        /* -webkit-transform: translate(100px,100px); */
        /* IE */
        /* -ms-transform: translate(100px,100px); */
        /* opera */
        /* -o-transform: translate(100px,100px); */
        /* firefox */
        /* -moz-transform: translate(100px,100px); */

        /* 旋转 */
        /* transform: rotate(180deg); */
         /* safari chrome */
        /* -webkit-transform: rotate(180deg); */
        /* IE */
        /* -ms-transform: rotate(180deg); */
        /* opera */
        /* -o-transform: rotate(180deg); */
        /* firefox */
        /* -moz-transform: rotate(180deg); */

        /* 缩放  第一个参数 是宽度的倍数 1代表不变 2代表2倍  第二个是高 也是倍数 */
        /* transform:scale(1,2); */
         /* safari chrome */
        /* -webkit-transform: scale(1,2); */
        /* IE */
        /* -ms-transform: scale(1,2); */
        /* opera */
        /* -o-transform: scale(1,2); */
        /* firefox */
        /* -moz-transform: scale(1,2); */


        /* 倾斜  第一个参数是x轴  第二个是Y轴 旋转*/
        /* transform: skew(20deg,20deg); */
         /* transform:skew(20deg,20deg); */
         /* safari chrome */
        /* -webkit-transform: skew(20deg,20deg); */
        /* IE */
        /* -ms-transform: skew(20deg,20deg); */
        /* opera */
        /* -o-transform: skew(20deg,20deg); */
        /* firefox */
        /* -moz-transform: skew(20deg,20deg); */


        /* 矩阵 */
        /* transform: matrix(0.707,0.707,-0.707,0.707,0,0); */


        /* 挤压 压扁 */
        /* transform: rotateY(100deg);
        -webkit-transform: rotateY(100deg); */
    }

</style>
</html>